<template>
	<jf-navigation through>
		<view>{{data.navigationTitle}}</view>
	</jf-navigation>
	
	<view class="user_background" v-if="data.loadEnd">
		<image :src="data.info.user_bg" mode="top" class="user_background_img"></image>
	</view>
	
	<view class="user_container" v-if="data.loadEnd">
		<view class="user_top">
			<view class="user_info">
				<view class="user_info_img">
					<image :src="data.info.avatar || headerIcon" mode="aspectFill"></image>
				</view>
				<view class="user_info_text">
					<view class="user_info_text_top">
						<view class="user_info_name">{{data.info.nickname}}</view>
						<view class="user_info_level">
							<view>LV{{data.info.level}}</view>
							<image src="@/static/images/common/level_icon.png"></image>
						</view>
					</view>
					<view class="user_info_text_bottom">
						<view>ID：{{data.info.uid}}</view>
						<view>IP：{{data.info.addres || $t('index.user.addressNone')}}</view>
					</view>
				</view>
				<view class="user_info_btn" :class="{'active': store.getFans(data.info.uid) === 0}" @click="attentionUser()">{{$t(store.getFans(data.info.uid) === 1 ? 'common.fans.cancelAttention' : 'common.fans.attention')}}</view>
			</view>
			
			<view class="user_statistics">
				<view class="user_statistics_item">
					<view>{{data.info.total_posts}}</view>
					<view>{{$t('index.user.dynamic')}}</view>
				</view>
				<view class="user_statistics_item" @click="goAttention()">
					<view>{{data.info.total_collect}}</view>
					<view>{{$t('index.user.attention')}}</view>
				</view>
				<view class="user_statistics_item" @click="goFans()">
					<view>{{data.info.total_fans}}</view>
					<view>{{$t('index.user.fans')}}</view>
				</view>
			</view>
			
			<view class="user_remark">
				<view>{{$t('index.user.remark')}}：<text>{{data.info.mark || $t('index.user.remarkNone')}}</text></view>
				<image src="@/static/images/index/icon012.png"></image>
			</view>
			
			<view class="user_menu">
				 <view :class="{'active': data.currentIndex === 0}" @click="selMenu(0)">{{$t('index.user.issue')}}</view>
				 <view :class="{'active': data.currentIndex === 1}" @click="selMenu(1)">{{$t('index.user.collect')}}</view>
				 <view :class="{'active': data.currentIndex === 2}" @click="selMenu(2)">{{$t('index.user.endorse')}}</view>
			</view>
			
			<jf-falls :list="data.list" :loading="data.loadingArticle" :loadEnd="data.loadEndArticle" :loadError="data.loadErrorArticle" :total="data.totalArticle" :loadNoneText="$t('common.load.none')" :loadEndText="$t('common.load.notMore')" :loadErrorText="$t('common.load.error')">
				<template #scope="{item}">
					<jf-forum :item="item"></jf-forum>
				</template>
			</jf-falls>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import headerIcon from "@/static/images/common/header_icon.png"
	import { reactive, getCurrentInstance } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { getInfo } from "@/api/user"
	import { listArticle } from "@/api/article"
	import { attention } from "@/api/user"
	import { onReachBottom } from "@dcloudio/uni-app"
	import { useStore } from "@/store/main"
	
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const data = reactive({
		navigationTitle: '',
		currentIndex: 0,
		list: [],
		fallLoading: false,
		info: null,
		loadEnd: false,
		loading: false,
		loadError: false,
		totalArticle: 0,
		loadEndArticle: false,
		loadErrorArticle: false,
		loadingArticle: false,
		uploading: false
	})
	const queryParams = reactive({
		page: 1,
		limit: 10,
		user_id: null,
		type: 1
	})
	
	const getUserinfo = ():void => {
		if(data.loading) return
		data.loadEnd = false
		data.loading = true
		getInfo({
			user_id: queryParams.user_id
		}).then((res:any):void => {
			data.info = res.data
			data.loadEnd = true
			// data.navigationTitle = proxy.$t('index.user.navigation').replace('{name}',data.info.nickname)
			store.setFans(data.info.uid, data.info.is_subscribe)
			setTimeout(()=>{
				selMenu(0)
			},600)
		}).catch(():void => {
			data.loadError = true
		}).finally(() => {
			data.loading = false
		})
	}
	const selMenu = (current:number):void => {
		data.currentIndex = current
		if(current === 0 && data.info.hidden_pub === 1){
			uni.showToast({
				title: proxy.$t('index.user.hideIssue'),
				icon: "none"
			})
			clearList()
		}else if(current === 1 && data.info.hidden_collect === 1){
			uni.showToast({
				title: proxy.$t('index.user.hideCollect'),
				icon: "none"
			})
			clearList()
		}else if(current === 2 && data.info.hidden_star === 1){
			uni.showToast({
				title: proxy.$t('index.user.hideStar'),
				icon: "none"
			})
			clearList()
		}else{
			queryParams.type = current + 1
			getList(true)
		}
	}
	const goAttention = ():void => {
		if(data.info.hidden_sub === 1){
			uni.showToast({
				title: proxy.$t('index.user.hideAttention'),
				icon: "none"
			})
		}else{
			navGo('/pages/index/attention/attention?id=' + data.info.uid)
		}
	}
	const goFans = ():void => {
		if(data.info.hidden_fans === 1){
			uni.showToast({
				title: proxy.$t('index.user.hideFans'),
				icon: "none"
			})
		}else{
			navGo('/pages/index/fans/fans?id=' + data.info.uid)
		}
	}
	const navGo = (url:string):void => {
		uni.navigateTo({url})
	}
	const getList = (init?:boolean):void => {
		if(init)clearList()
		if(data.loadEndArticle || data.loadingArticle)return
		data.loadEndArticle = false
		data.loadErrorArticle = false
		data.loadingArticle = true
		listArticle(queryParams).then( (res:any) =>{
			data.totalArticle = res.data.count
			data.list = data.list.concat(res.data.list)
			if(queryParams.page * queryParams.limit > data.totalArticle){
				data.loadEndArticle = true
			}
			queryParams.page += 1
		}).catch(() => {
			data.loadErrorArticle = true
		}).finally(() => {
			data.loadingArticle = false
		})
	}
	const clearList = ():void => {
		queryParams.page = 1
		data.totalArticle = 0
		data.list = []
		data.loadEndArticle = false
		data.loadErrorArticle = false
		data.loadingArticle = false
	}
	const attentionUser = ():void => {
		if(data.uploading)return
		data.uploading = true
		attention({
			user_id: data.info.uid,
			type: data.info.is_subscribe === 1 ? 0 : 1
		}).then(():void => {
			uni.showToast({
				title: proxy.$t(data.info.is_subscribe === 1 ? 'index.info.unAttentionSuccess' : 'index.info.attentionSuccess'),
				icon: "none"
			})
			data.info.is_subscribe = data.info.is_subscribe === 1 ? 0 : 1
			store.setFans(data.info.uid, data.info.is_subscribe)
		}).catch(() => {
			uni.showToast({
				title: proxy.$t(data.info.is_subscribe === 1 ? 'index.info.unAttentionFail' : 'index.info.attentionFail'),
				icon: "none"
			})
		}).finally(() => {
			data.uploading = false
		})
	}
	
	onLoad((options:any):void => {
		if(options.id)queryParams.user_id = Number(options.id)
		getUserinfo()
	})
	onReachBottom(():void => {
		getList()
	})
</script>

<style lang="scss">
	.user_background{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 362rpx;
		overflow: hidden;
		.user_background_img{
			width: 100vw;
			height: 360rpx;
		}
	}
	.user_container{
		padding-top: 330rpx;
		.user_top{
			position: relative;
			z-index: 1;
			width: 100vw;
			border-radius: 32rpx 32rpx 0 0;
			background: #ffffff;
			box-sizing: border-box;
			.user_info{
				@include layout(row, flex-start);
				width: 686rpx;
				height: 106rpx;
				padding-top: 24rpx;
				margin-left: 32rpx;
				.user_info_img{
					position: relative;
					width: 160rpx;
					height: 160rpx;
					border: 4rpx solid #ffffff;
					border-radius: 80rpx;
					box-sizing: border-box;
					flex-shrink: 0;
					margin-top: -54rpx;
					image{
						&:nth-child(1){
							width: 152rpx;
							height: 152rpx;
							border-radius: 76rpx;
						}
						&:nth-child(2){
							position: absolute;
							right: 0;
							bottom: 0;
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
				.user_info_text{
					margin-left: 32rpx;
					flex-grow: 1;
					.user_info_text_top{
						@include layout();
						.user_info_name{
							@include textOverflow(1);
							font-weight: 600;
							line-height: 44rpx;
							font-size: 36rpx;
						}
						.user_info_level{
							position: relative;
							margin-left: 16rpx;
							view{
								padding: 0 14rpx 0 46rpx;
								background: var(--background);
								font-weight: 500;
								color: #FFFFFF;
								line-height: 32rpx;
								font-size: 20rpx;
								border-radius: 16rpx;
							}
							image{
								position: absolute;
								left: 0;
								top: -4rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
					.user_info_text_bottom{
						@include layout();
						font-weight: 400;
						color: #A2A9B7;
						font-size: 22rpx;
						line-height: 44rpx;
						margin-top: 16rpx;
						view{
							&:nth-child(2){
								margin-left: 32rpx;
							}
						}
					}
				}
				.user_info_btn{
					flex-shrink: 0;
					height: 56rpx;
					line-height: 52rpx;
					padding: 0 24rpx;
					border-radius: 28rpx;
					margin-left: 20rpx;
					font-weight: 400;
					color: #535A69;
					font-size: 24rpx;
					border: 2rpx solid #535A69;
					box-sizing: border-box;
					&.active{
						background: #326AFF;
						color: #ffffff;
						border-color: #326AFF;
					}
				}
			}
			.user_statistics{
				width: 686rpx;
				@include layout();
				padding: 40rpx 0 0 32rpx;
				.user_statistics_item{
					@include layout(row, flex-end);
					margin-right: 32rpx;
					height: 44rpx;
					view{
						&:nth-child(1){
							font-family: DIN;
							font-weight: bold;
							font-size: 36rpx;
							line-height: 44rpx;
						}
						&:nth-child(2){
							font-weight: 400;
							color: #7C8493;
							font-size: 24rpx;
							margin-left: 4rpx;
						}
						&:nth-child(3){
							height: 32rpx;
							min-width: 32rpx;
							border-radius: 16rpx;
							box-sizing: border-box;
							padding: 0 10rpx;
							text-align: center;
							font-size: 20rpx;
							line-height: 32rpx;
							background: #F83C1E;
							color: #ffffff;
							font-weight: 500;
							margin-left: 4rpx;
							transform: translateY(-6rpx);
						}
					}
				}
			}
			.user_remark{
				width: 686rpx;
				margin: 24rpx 0 0 32rpx;
				@include layout(row,flex-start);
				font-weight: 400;
				font-size: 26rpx;
				line-height: 44rpx;
				view{
					flex-grow: 1;
				}
				image{
					width: 32rpx;
					height: 32rpx;
					margin-left: 24rpx;
					flex-shrink: 0;
					margin-top: 4rpx;
				}
			}
			.user_menu{
				width: 686rpx;
				border-top: 2rpx solid #E7EAEE;
				margin-top: 40rpx;
				padding: 32rpx 0 8rpx 0;
				margin-left: 32rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				view{
					width: 180rpx;
					position: relative;
					height: 58rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #7C8493;
					line-height: 44rpx;
					text-align: center;
					&.active{
						color: #1F2937;
						font-weight: 600;
						&::before{
							position: absolute;
							content: "";
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							width: 40rpx;
							height: 8rpx;
							border-radius: 4rpx;
							background: var(--background);
						}
					}
				}
			}
		}
	}
	
</style>